<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <SCRIPT src="static/login/js/jquery-1.9.1.min.js" type="text/javascript"></SCRIPT>
    <link rel="stylesheet" type="text/css" href="static/plugins/jquery-easyui-1.10.19/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="static/plugins/jquery-easyui-1.10.19/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="static/images">
    <script type="text/javascript" src="static/plugins/jquery-easyui-1.10.19/jquery.min.js"></script>
    <script type="text/javascript" src="static/plugins/jquery-easyui-1.10.19/jquery.easyui.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            background-image: url("static/images/login.jpg");
        }
        .login-wrapper {
            width: 458px;
            height: 388px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 150px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 13px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128,125,125);
            font-size: 15px;
            outline: none;
        }
        .input-item::placeholder {
            text-transform: uppercase;
        }
        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #dfcfc1, #007ebd);
            color: #fff;
            display: inline-block;
        }
        .msg {
            text-align: center;
            line-height: 80px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
        .forgot-password {
            text-align: center;
            line-height: 30px;
            margin-top: 10px;
        }

        .forgot-password a {
            text-decoration: none;
            color: #abc1ee;
        }
        .verification-code {
            margin-top: 20px;
            position: relative; /* 添加相对定位 */
        }
        #verificationImage {
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        #refreshBtn {
            background-color: #3f3f3f;
            color: white;
            padding: 10px 20px;
            cursor: pointer;
            position: absolute; /* 添加绝对定位 */
            top: 11%; /* 相对于父元素垂直居中 */
            transform: translateY(-65%); /* 通过transform进行垂直居中 */
            right:30px; /* 距离右边距离为5px */
        }
        #verificationInput {
            width: 100%;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            font-size: 15px;
            outline: none;
        }
    </style>
    <SCRIPT type="text/javascript">
        $(function () {
            $(".btn").click(function (){
                let username = $("#username").val();
                let password = $("#password").val();
                let validCode = $("#validCode").val();
                let select = $("#cx").val();
                $.ajax({
                    type:"POST",
                    url:"login2Servlet?action=login",
                    data:{username:username,password:password,validCode:validCode,select:select},
                    success:function (ret)
                    {
                        console.log("接受："+select)
                        let result = eval("(" +ret+")");
                        if(result.code == '201')
                            if (select == "user"){
                                location.href="http://localhost:8080/lab00/index.jsp";
                            }else if(select == "student"){
                                location.href="http://localhost:8080/lab00/indexStudent.jsp";
                            }else {
                                location.href="http://localhost:8080/lab00/indexTeacher.jsp";
                            }
                        else{
                            alert(result.msg);
                        }
                        // console.log(result);
                    }
                })
            })
        });
    </SCRIPT>
</head>
<body>
<div class="container">
    <div class="login-wrapper">
        <div class="header">学生信息管理系统</div>
        <form method="post" action="login2Servlet">
        <div class="form-wrapper">
            <input type="text" name="username" id="username" placeholder="用户名" class="input-item">
            <input type="password" name="password" id="password" placeholder="密码" class="input-item">
            <p style="position: relative; text-align: left;">验证码:
                <input class="ipt" style="width:120px; height: 40px" name="validCode" id="validCode" type="text" placeholder="验证码">
                <img src="ServletvalidCode" onclick="this.src='ServletvalidCode?r='+Math.random()" >
            </p>
            <div class="lgD" style="margin-top: 15px">权限:&nbsp;&nbsp;<select name="cx" id="cx" style="width:130px; height:40px;">
                <option value="user">管理员</option>
                <option value="student">学生</option>
                <option value="teacher">教师</option>
            </select></div>
                <button type="button" class="btn">登录</button>
<%--        </div>--%>
        </form>

    </div>
</div>

<%--<script>--%>
<%--    var refreshButton = document.getElementById('refreshBtn');--%>
<%--    refreshButton.addEventListener('click', generateVerificationCode);--%>

<%--    // 生成随机验证码并显示在页面上--%>
<%--    function generateVerificationCode() {--%>
<%--        var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";--%>
<%--        var string_length = 6;--%>
<%--        var randomCode = '';--%>
<%--        for (var i = 0; i < string_length; i++) {--%>
<%--            var rnum = Math.floor(Math.random() * chars.length);--%>
<%--            randomCode += chars.substring(rnum, rnum + 1);--%>
<%--        }--%>
<%--        var verificationImage = document.getElementById('verificationImage');--%>
<%--        verificationImage.src = 'data:image/png;base64,' + drawImage(randomCode);--%>
<%--    }--%>

<%--    // Draw the verification code on a canvas and return the base64 encoded image data--%>
<%--    function drawImage(code) {--%>
<%--        var canvas = document.createElement('canvas');--%>
<%--        canvas.width = 100;--%>
<%--        canvas.height = 40;--%>
<%--        var ctx = canvas.getContext('2d');--%>
<%--        ctx.fillStyle = '#f3f3f3';--%>
<%--        ctx.fillRect(0, 0, canvas.width, canvas.height);--%>
<%--        ctx.font = '20px Arial';--%>
<%--        ctx.fillStyle = '#333';--%>
<%--        ctx.fillText(code, 10, 30);--%>
<%--        return canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '');--%>
<%--    }--%>
<%--    generateVerificationCode(); // 初始生成验证码图片--%>
<%--</script>--%>
</body>
</html>
<%--            <input type="text" id="verificationInput" name="verification" placeholder="验证码" class="input-item">--%>
<%--            <div class="verification-code">--%>
<%--                <img src="/ServletvalidCode" onclick="this.src='/ServletvalidCode?r='+Math.random()" id="verificationImage">--%>
<%--                <button id="refreshBtn">刷新验证码</button>--%>